/*
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2025-07-07 22:31:38
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2025-07-08 22:31:14
 * @FilePath: /book-manage-react/src/components/KeyStrategyDisplay/index.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React from 'react';
import { Tag } from 'antd';
import { KeyOutlined, SortAscendingOutlined, LinkOutlined, CloseOutlined } from '@ant-design/icons';
import './index.scss';

import { setStrategyType, getStrategyType } from '@/utils/keyTypeStore';

const KeyStrategyDisplay = () => {

  const keyStrategy = getStrategyType()
  const displayText = (() => {
    const strategyMap = {
      'id': 'ID作为Key',
      'index': '索引作为Key',
      'key': '使用Key属性',
      'none': '不使用Key'
    };
    return strategyMap[keyStrategy] || 'ID作为Key';
  })();

  const tagType = (() => {
    const typeMap = {
      'id': 'blue', 
      'index': 'green', 
      'key': 'red', 
      'none': 'default' 
    };
    return typeMap[keyStrategy] || 'blue';
  })();

  const IconComponent = (() => {
    const iconMap = {
      'id': KeyOutlined,
      'index': SortAscendingOutlined,
      'key': LinkOutlined,
      'none': CloseOutlined
    };
    return iconMap[keyStrategy] || KeyOutlined;
  })();

  return (
    <div className="key-strategy-display">
      <Tag color={tagType} className="ant-tag-custom">
        <IconComponent className="icon-custom" />
        <span className="strategy-text">{displayText}</span>
      </Tag>
    </div>
  );
};

export default KeyStrategyDisplay;